<template>
	<div class='welcome'>
		<TopNav />
		<!-- 文字和按键 -->
		<div class="container center">
			<p>欢迎来到旧物新生社区，</p>
			<p>开启儿童玩具改造探索之旅吧</p>
			<Button
				class="login-btn"
				width="190"
				height="65"
				@click="showLogin=true"
			>
				去探索
			</Button>
		</div>
		<Login
			v-if="showLogin"
			@close="showLogin=false"
		/>
	</div>
</template>

<script>
import Login from './components/Login'
export default {
  route: {
    path: '/'
  },
  components: {
    Login
  },
  data() {
    return {
      showLogin: false
    }
  },
}
</script>

<style lang='scss' scoped>
.welcome {
  width: 100vw;
  height: 100vh;
  background-color: #faf6e6;
  background-image: url('https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/baground/20220315185011104-home-bg.png');
  background-size: cover;

  .container {
    position: absolute;
    bottom: 90px;
    left: 50%;
    margin: auto;
    transform: translateX(-50%);

    p {
      font-size: 36px;
      line-height: 50px;
      color: #ffffff;
      text-align: left;
    }

    .login-btn {
      margin-top: 50px;
    }
  }
}
</style>
